<template lang="">
  <view class="scroll-btn">
    <scroll-view scroll-x scroll-with-animation class="scroll">
      <view v-for="(item, index) in column[0]" :key="index" :class="{active: index===activeIndex}" @click="chosebtn(index, item)">
        <text>{{item}}</text>
      </view>   
    </scroll-view> 
  </view>
</template>
<script>
export default {
  props: {
    column: {
      type: Array,
      default() {
        // 为了兼容picker组件的nt设定 这里的数据格式也搞成了二维数组
        return [[]] 
      }
    },
    myKey: {
      type: Number,
      default: 0
    },
    initActive: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      activeIndex: this.initActive
    }
  },
  methods: {
    chosebtn(index, item) {
      this.activeIndex = index
      const { column, myKey } = this
      const e = {
        indexs: [index],
        value: [item],
        values: [...column],
        myKey 
      }
      this.$emit("confirm", e)
    }
  },
}
</script>
<style lang="scss">
  .scroll-btn {
    padding-left: 32rpx;
    .scroll {
      width: 540rpx;
      height: 100%;
      white-space: nowrap;
      view {
        padding: 14rpx 32rpx;
        margin-right: 24rpx;
        border-radius: 48rpx;
        background-color: #f5f5f5;
        color: #202020;
        font-size: 28rpx;
        display: inline-block;
        justify-content: center;
        align-items: center;
      }
    }
    .active {
      color: #3A62E9 !important;
      background-color: #ebf5fd !important;
    }
  }
</style>